<template>
  <!-- 案件阶段统计 -->
  <el-card v-if="hasLawcaseStats" class="content-card">
    <template #header>
      <div class="card-header">
        <h3>案件各阶段分布</h3>
      </div>
    </template>
    <div ref="lawcaseChart" class="chart-container large"></div>
  </el-card>
</template>

<script setup lang="ts">
  import { ref, onMounted, onUnmounted, watch } from 'vue'
  import * as echarts from 'echarts'

  interface BusinessStats {
    contract_stats: {
      case_entrust: {
        name: string
        count: number
        amount: number
      }
      legal: {
        name: string
        count: number
        amount: number
      }
    }
    customer_stats: {
      company: {
        name: string
        total: number
      }
      individual: {
        name: string
        total: number
      }
    }
    lawcase_stage_stats: {
      total_count: number
      stages: Array<{
        stage_name: string
        count: number
      }>
    }
  }

  interface Props {
    businessStats: BusinessStats
  }

  const props = defineProps<Props>()

  // 图表实例引用
  const lawcaseChart = ref<HTMLElement>()

  // 图表对象
  let lawcaseChartInstance: echarts.ECharts | null = null

  // 计算属性
  const hasLawcaseStats = ref(false)

  // 初始化案件阶段分布图
  const initLawcaseChart = () => {
    // 检查必要属性是否存在
    const lawcaseStageStats = props.businessStats.lawcase_stage_stats || {
      total_count: 0,
      stages: [],
    }
    hasLawcaseStats.value = lawcaseStageStats.stages.length > 0

    if (lawcaseChart.value && hasLawcaseStats.value) {
      lawcaseChartInstance?.dispose()
      lawcaseChartInstance = echarts.init(lawcaseChart.value)
      const lawcaseData = lawcaseStageStats.stages.map(stage => ({
        name: stage.stage_name,
        value: stage.count,
      }))

      const lawcaseOption = {
        tooltip: {
          trigger: 'axis' as const,
          axisPointer: {
            type: 'shadow' as const,
          },
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true,
        },
        xAxis: {
          type: 'value' as const,
        },
        yAxis: {
          type: 'category' as const,
          data: lawcaseData.map(item => item.name),
        },
        series: [
          {
            name: '案件数量',
            type: 'bar' as const,
            barWidth: '60%',
            data: lawcaseData.map(item => item.value),
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                { offset: 0, color: '#83bff6' },
                { offset: 0.5, color: '#188df0' },
                { offset: 1, color: '#188df0' },
              ]),
            },
          },
        ],
      }
      lawcaseChartInstance.setOption(lawcaseOption as any)
    }
  }

  // 刷新所有图表
  const resizeCharts = () => {
    lawcaseChartInstance?.resize()
  }

  // 初始化所有图表
  const initCharts = () => {
    initLawcaseChart()
  }

  // 监听业务数据变化，重新初始化图表
  watch(
    () => props.businessStats,
    () => {
      initCharts()
    },
    { deep: true }
  )

  // 组件挂载时
  onMounted(() => {
    initCharts()
    window.addEventListener('resize', resizeCharts)
  })

  // 组件卸载时
  onUnmounted(() => {
    window.removeEventListener('resize', resizeCharts)
    lawcaseChartInstance?.dispose()
  })
</script>

<style scoped lang="scss">
  .content-card {
    margin-bottom: 20px;
  }

  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .card-header h3 {
    margin: 0;
    font-size: 16px;
    color: #303133;
  }

  .chart-container {
    width: 100%;
    height: 300px;
  }

  .chart-container.large {
    height: 400px;
  }

  .chart-container.empty {
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #909399;
    font-size: 14px;
  }
</style>
